<!--
 * @Author: LiZn
 * @Date: 2021-09-20 03:48:52
 * @LastEditTime: 2021-09-20 04:08:38
 * @LastEditors: LiZn
 * @Description: file content
 * @FilePath: \project\project\src\components\svgIcon.vue
-->
<template>
  <div>
    <svg class="svg-icon" :class="svgClass" :style="styleProps">
      <use :xlink:href="iconName"></use>
    </svg>
  </div>
</template>

<script>
  export default {
    name:"SvgIcon",
    props:{
      iconClass:{
        type:String,
        required:true
      },
      svgClass:{
        type:String,
        default:''
      },
      styleProps:{
        type:String,
        default:''
      }
    },
    mounted(){
    },
    computed:{
      iconName(){
        return `#icon-${this.iconClass}`
      }
    }
  }

</script>
<style scoped>
  .svg-icon{
    width:20px;
    height:20px;
    vertical-align: -0.25rem;
    fill:currentColor;
    overflow: hidden;

  }
</style>